<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import {
  NModal,
  NForm,
  NFormItem,
  NInput,
  NScrollbar,
  NButton,
  NSpace,
  NSteps,
  NStep,
  NCard
} from 'naive-ui'
import Step2 from '@/views/LLMStudio/tools/components/Step2.vue'
import Step1 from '@/views/LLMStudio/tools/components/Step1.vue'
// 步骤控制

const currentStep = ref(1)
const totalSteps = 4

// 表单数据
const formValue = reactive({
  toolName: '',
  description: '',
  icon: null,
  schema: '',
  authMethod: 'none',
  authType: 'basic',
  apiKey: '',
  apiValue: '',
  privacyPolicy: '',
  disclaimer: ''
})

// Modal 控制
const showModal = ref(false)
const showAuthModal = ref(false)
const showDebugModal = ref(false)

// 当前选中的路径
const currentPath = ref(null)

// 调试表单数据
const debugFormData = ref({})

// 方法定义
const nextStep = () => {
  if (currentStep.value < totalSteps - 1) {
    currentStep.value++
  }
}

const prevStep = () => {
  if (currentStep.value > 0) {
    currentStep.value--
  }
}

const closeModal = () => {
  showModal.value = false
}

const saveModal = () => {
  console.log('保存表单:', formValue)
  showModal.value = false
}

const openModal = () => {
  showModal.value = true
}

// 暴露方法给父组件
defineExpose({ openModal })
</script>

<template>
  <n-modal
    v-model:show="showModal"
    preset="card"
    title="创建自定义工具"
    size="huge"
    style="width: 95%; height: 95vh"
    class="rounded-3xl"
  >
    <n-steps
      :current="currentStep"
      style="width: 80%; margin: 0 0 0 15%"
      :status="currentStep == 3 ? 'finish' : 'process'"
    >
      <n-step title="基本信息" description="填写工具基本信息" />
      <n-step title="Schema 解析" description="解析并配置 Schema" />
      <n-step title="完成" description="查看工具详情" />
    </n-steps>
    <n-scrollbar style="width: 100%" content-style="height: calc(100% - 60px);">
      <!-- Step 2: Schema Parsing -->
      <Step1 v-if="currentStep === 1"></Step1>
      <Step2 v-if="currentStep === 2"></Step2>

      <!-- Step 3: Completion -->
      <div v-if="currentStep === 3">
        <n-card title="工具详情">
          <p>工具名称: {{ formValue.toolName }}</p>
          <p>描述: {{ formValue.description }}</p>
          <p>可用接口数量: {{ parsedSchema.paths.length }}</p>
        </n-card>
      </div>
    </n-scrollbar>
    <template #footer>
      <n-space justify="end">
        <n-button @click="prevStep" :disabled="currentStep === 0">上一步</n-button>
        <n-button @click="nextStep" :disabled="currentStep === totalSteps - 1">下一步</n-button>
        <n-button @click="closeModal">取消</n-button>
        <n-button type="primary" @click="saveModal" :disabled="currentStep !== totalSteps - 1"
          >保存</n-button
        >
      </n-space>
    </template>
  </n-modal>

  <!-- Auth Configuration Modal -->

  <!-- Debug Modal -->
  <n-modal v-model:show="showDebugModal" preset="card" title="接口调试">
    <n-form
      :model="debugFormData"
      label-placement="left"
      label-width="auto"
      require-mark-placement="right-hanging"
    >
      <n-form-item
        v-for="param in currentPath?.parameters"
        :key="param.name"
        :label="param.name"
        :path="param.name"
      >
        <n-input v-model:value="debugFormData[param.name]" :placeholder="param.description" />
      </n-form-item>
    </n-form>
    <template #footer>
      <n-button type="primary" @click="() => console.log('Debug request:', debugFormData)">
        发送请求
      </n-button>
    </template>
  </n-modal>
</template>

<style scoped lang="scss">
::v-deep(.n-scrollbar-content) {
  height: 100%;
}

::v-deep(.n-card__content) {
  height: 100%;
}
.n-form-item-label {
  font-weight: bold;
}

.cm-editor {
  height: 100%;
}
</style>
